<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="checkAll">
		<label for="toggle-all">Mark all as complete</label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus v-model.trim="name" @keyup.enter="add"/>
	</header>
</template>

<script>
import { mapState } from 'vuex'
	export default {
		data(){
			return{
				name:''
			}
		},
		methods:{
			add(){
				if(!this.name){
					return alert('请输入内容')
				}
				this.$store.commit('add',this.name)
				// 清空
				this.name = ''
			}
		},
		computed:{
			...mapState(['list']),
			checkAll:{
				get(){
					return this.list.every((item => item.done))
				},
				set(value){
					// 修改done属性
					this.$store.commit('checkAll',value)
				}
			}
		}
	}
</script>
